<template>
	<view class="page">
		<view class="top">
			<view class="line">
				<view class="lable">
					姓名
					<view class="xing">
						*
					</view>
				</view>
				<input type="text" v-model="name" placeholder="请输入姓名"/>
				
			</view>
			<view class="line">
				<view class="lable">
					身份证号码
					<view class="xing">
						*
					</view>
				</view>
				<input type="idcard" maxlength="18"  v-model="idcard" placeholder="请输入身份证号"/>
			</view>
			<view class="line">
				<view class="lable">
					选择身份
					<view class="xing">
						*
					</view>
				</view>
			</view>
			<radio-group class="labelgroup" @change="radioChange">
							<label class="labelbox" >
								<view>
									<radio value="1" :checked="index == '1'" />
								</view>
								<view>团长</view>
							</label>
							<label class="labelbox" >
								<view>
									<radio value="2" :checked="index == '2'" />
								</view>
								<view>团员</view>
							</label>
				</radio-group>
				<view class="line" v-if="index==2">
					<view class="lable">
						选择团长
						<view class="xing">
							*
						</view>
					</view>
					<picker   @change="selecttuanzhang" :value="jueseindex" :range="array" range-key="dName">
							<view class="picker">{{array[jueseindex].dName}}</view>
					</picker>
				</view>
				
			
		</view>
		<view class="cardbox">
			<view class="cardtitle">
				身份证照片
			</view>
			<view class="imglist">
				<view class="imgbox" @click="uploadimgzheng">
					<image class="img" :src="zheng ? 'https://changban.dianjingkeji.net' + zheng : 'https://changban.dianjingkeji.net/img/zheng.png'" ></image>
				</view>
				<view class="imgbox"@click="uploadimgfan">
					<image class="img" :src="fan ? 'https://changban.dianjingkeji.net' + fan : 'https://changban.dianjingkeji.net/img/fan.png'" ></image>
				</view>
			</view>
		</view>

     <view class="pagebtn" @click="submit">
     	提交
     </view>
	</view>
</template>

<script>
	import {getOneDailiList,applyDaili} from '../../utils/daili.js'
	export default {
		data() {
			return {
				name:'',
				idcard:'',
				zheng:'',
				fan:'',
			index:''	,
			jueseindex:'',
			array:[
				'张三','李四'
			]
			}
		},
		onShow() {
			let p={
				phone:uni.getStorageSync('phone')
			}
			getOneDailiList(p).then(res=>{
				console.log(res,'团长列表')
			   this.array=res.data.data
			})
			
		},
		methods: {
			
			submit(){
				  let that=this
				  if(that.name==''){
					  uni.showToast({
					  	title: '请输入姓名',
						icon:'none',
					  	duration: 2000
					  });
                        return
				  }
				  if(that.idcard==''){
				  		uni.showToast({
				  			title: '请输入身份证号',
							icon:'none',
				  		   duration: 2000
				  			});
				        return
				  }
				  if(that.index==''){
				  		uni.showToast({
				  			title: '请选择身份',
				  			icon:'none',
				  		   duration: 2000
				  			});
				        return
				  }
				  if(that.index==2&&that.jueseindex==''){
					  uni.showToast({
					  	title: '请选择团长',
					  	icon:'none',
					     duration: 2000
					  	});
					  return
				  }
				  if(that.zheng==''){
				  		uni.showToast({
				  			title: '请上传身份证照片',
				  			icon:'none',
				  		   duration: 2000
				  			});
				        return
				  }
				  if(that.fan==''){
				  		uni.showToast({
				  			title: '请上传身份证照片',
				  			icon:'none',
				  		   duration: 2000
				  			});
				        return
				  }
				  uni.showModal({
				  	title: '提示',
				  	content: '确定提交吗？',
				  	success: function (res) {
				  		if (res.confirm) {
				  			let p={
								phone:uni.getStorageSync('phone'),
								name:that.name,
								idCard:that.idcard,
								dcardzheng:that.zheng,
								dcardfan:that.fan,
								usertype:that.index,
								parentid:that.index==2?that.array[that.jueseindex].id:''
							}
							applyDaili(p).then(res=>{
								console.log(res)
								if(res.data.code==200){
									uni.showLoading({
										title: '资料已提交，等待审核'
									});
									setTimeout(()=>{
										uni.hideLoading();
										uni.navigateBack()
									},2000)
								}
							})
				  		} else if (res.cancel) {
				  			console.log('用户点击取消');
				  		}
				  	}
				  });

			},
			
		
			//上传身份证正面
			uploadimgzheng(){
				let that=this
				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera','album'], //直接拍照
					success: function (res) {
						let url=res.tempFilePaths[0]
							
						uni.uploadFile({
									//url: that.$BASE_URL+'/api/commonApi/uploadFile', 
									url: 'https://changban.dianjingkeji.net/prod-api/api/commonApi/uploadFile', 
									filePath: url,
									name: 'file',
									success: (uploadFileRes) => {
									    that.zheng=JSON.parse(uploadFileRes.data).fileName
									console.log( that)
									},
									 fail: (err) => {
									        console.error('上传失败：', err);
									      }
									
								});
					}
				});
			},
			
			//上传身份证反面
			uploadimgfan(){
				let that=this
				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera','album'], //直接拍照
					success: function (res) {
						let url=res.tempFilePaths[0]
							
						uni.uploadFile({
									//url: that.$BASE_URL+'/api/commonApi/uploadFile', 
									url: 'https://changban.dianjingkeji.net/prod-api/api/commonApi/uploadFile', 
									filePath: url,
									name: 'file',
									success: (uploadFileRes) => {
									    that.fan=JSON.parse(uploadFileRes.data).fileName
									console.log( that)
									},
									 fail: (err) => {
									        console.error('上传失败：', err);
									      }
									
								});
					}
				});
			},
			
			
			//选择角色
			radioChange(e){
				
				this.index=e.detail.value
			},
			
			
			//选择团长
			selecttuanzhang(e){
				this.jueseindex=e.detail.value
			},
			
		}
	}
</script>

<style lang="less" scoped>
   .page{
	   width: 750rpx;
	   box-sizing: border-box;
	   padding: 20rpx;
	   .top{
		   width: 100%;
		   box-sizing: border-box;
		   background-color: white;
		   .line{
			   width: 100%;
			    box-sizing: border-box;
				
				padding: 40rpx 30rpx;
			   display: flex;
			   align-items: center;
			   justify-content: space-between;
			   font-weight: bold;
			   .lable{
				   display: flex;
				   .xing{
					   color: red;
				   }
			   }
			   input{
				   text-align: right;
				   
			   }
			
		   }
		   .labelgroup{
		   					   width: 100%;
		   					   display: flex;
		   					   align-items: center;
		   					   justify-content: space-evenly;
		   					   .labelbox{
		   						   display: flex;
		   						   align-items: center;
		   						   font-size: 30rpx;
		   						   font-weight: bold;
		   					   }
		   }
		   .picker{
			   width: 400rpx;
			   height: 60rpx;
			   background-color: #F4F4F4;
			   padding-left: 20rpx;
			   
		   }
	   }
	   .cardbox{
		   width: 100%;
		   box-sizing: border-box;
		   background-color: white;
		    margin-top: 30rpx;
		   padding: 20rpx;
		   .cardtitle{
			   font-weight: bold;
			   margin: 20rpx 0rpx;
		   }
		   .imglist{
			   width: 100%;
			   margin-top: 40rpx;
			   height: 250rpx;
			   display: flex;
			   align-items: center;
			   justify-content: space-between;
			   .imgbox{
				  width: 310rpx;
				  height: 250rpx;
				  border-radius: 20rpx; 
			   }
			   .img{
				  width: 100%;
				  height: 100%;
				  border-radius: 20rpx;
			   }
		   }
	   }
	   
	   .pagebtn{
	   				   width: 80%;
	   				   height: 70rpx;
	   				   color: white;
	   				   background-color: #1a4f8a;
	   				   text-align: center;
	   				   line-height: 70rpx;
	   				   border-radius: 35rpx;
	   				   margin: 100rpx auto;
	   }
	 
	   
   }
</style>
